<template>
    <div class="dv-proto-lab">
        <dv-spaceship :style="scaleStyle"></dv-spaceship>
    </div>
</template>

<script>
    import DvSpaceship from "../DvSpaceship";
    import {DvLayout} from "../../store/Enums";
    import {mapActions} from "vuex"

    export default {
        name: "DvProtoLab",
        components: {DvSpaceship},
        data() {
            return {
                scaleStyle: ""
            }
        },
        mounted() {
            let _this = this
            this.zoom()
            window.onresize = () => {
                _this.zoom()
            }

            setTimeout(() => {
                _this.tile()
            }, 300)
        },
        methods: {
            zoom() {
                let width = getComputedStyle(document.documentElement)
                        .getPropertyValue("--dv-viewport-width"),
                    height = getComputedStyle(document.documentElement)
                        .getPropertyValue("--dv-viewport-height")
                let x = window.innerWidth / width, y = window.innerHeight / height
                let scale = "scale(" + x + ", " + y + ")"
                let cssText = "overflow:hidden;"
                cssText += "width:" + width + "px;"
                cssText += "height:" + height + "px;"
                let browsers = ["", "-ms-", "-moz-", "-webkit-", "-o-"]
                browsers.forEach((key) => {
                    cssText += key + "transform:" + scale + ";"
                    cssText += key + "transform-origin: 0 0 0;"
                })
                this.scaleStyle = cssText
            },
            ...mapActions("dv_layout", {
                tile: DvLayout.Actions.TILE
            })
        }
    }
</script>

<style lang="scss" scoped>
    .dv-proto-lab {
        width: 100vw;
        height: 100vh;
    }
</style>
